草庐IT

SVG 阴影

全部标签

javascript - SVG/XML 中是否有一些 innerHTML 替代品?

在HTML中,我可以构建一个简单的模板系统,方法是提供一个字符串形式的模板,替换它的某些部分,然后使用innerHTML将它分配给某个容器。vartempl='{myText}'varnewContent=templ.replace('{myText}',someVariable);document.querySelector('#myContainer').innerHTML=newContent;这样我就可以利用浏览器的HTML解析器,而不必重复使用document.createElement()。如果模板超出几个元素,后者可能会非常麻烦。然而,在SVG中,元素上没有innerHT

javascript - 为什么 Coffeescript 认为阴影是个坏主意

我想切换到Coffeescript有一段时间了,昨天我以为我终于卖掉了,但后来我偶然发现了ArminRonachersarticle关于Coffeescript中的阴影。Coffeescript现在确实放弃了阴影,如果您对嵌套循环使用相同的迭代器就是该问题的一个示例。vararr,hab,i;arr=[[1,2],[1,2,3],[1,2,3]];for(vari=0;i因为cs只声明一次变量,我无法在coffeescript中执行此操作阴影已被有意删除,我想了解为什么cs作者想要摆脱这样的功能?更新:这是一个betterexample为什么阴影很重要,源自关于此问题的问题ongith

javascript - 从字符串创建 SVG DOM 元素

我将如何从String创建SVGDOM元素?例子:varsvgStr='backgroundLayer1'; 最佳答案 您可以使用DOMParser解析XML字符串。varparser=newDOMParser();vardoc=parser.parseFromString(stringContainingXMLSource,"image/svg+xml");已解析字符串的根元素将是doc.documentElement为了跨浏览器正常工作,您需要设置html命名空间,即您的字符串需要如下所示...varsvg2='

javascript - 如何用 PixiJS 渲染 SVG?

我正在尝试使用SVG图像制作游戏以实现可扩展性并从中按程序制裁剪理对象(有关操作方法,请参阅matter.js)。我遇到的问题是,如果我加载2个不同的SVG纹理然后渲染它们,第二个在第一个下面有一层。这不会发生在光栅图像上,也不会发生在Canvas选项上,只有在WebGL上才会发生。有没有办法阻止这种情况,还是我做错了SVG?varrenderer=PIXI.autoDetectRenderer(window.innerWidth,window.innerHeight,{backgroundColor:0xffffff,resolution:2});//addviewportandfi

javascript - 将 Raphael SVG 转换为图像(png 等)客户端

这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:ConvertSVGtoimage(JPEG,PNG,etc.)inthebrowser我有一个小项目,用户使用Raphael构建图表,然后将组成的图表导出为图像进行保存。问题是它必须离线运行。http://www.nihilogic.dk/labs/canvas2image/将无法工作,因为它需要Canvas,而不是Raphael生成的SVG。有没有一种方法(javascript)可以从SVG导出图像?

javascript - SVG 标记 - 我可以设置长度和 Angular 吗?

我正在尝试从圆心开始以一定Angular(60度)绘制6根棍子图中是手动设置坐标实现的。是否可以用Angular和长度来画这6根木棍?如果有必要,我愿意使用图书馆。 最佳答案 这是一个demoImadeforyou.主要使用的函数是在圆上找一点,如下:functionfindPoint(cx,cy,rad,cornerGrad){varcornerRad=cornerGrad*Math.PI/180;varnx=Math.cos(cornerRad)*rad+cx;varny=Math.sin(cornerRad)*rad+cy;r

javascript - 创建后获取 d3.js SVG 文本元素的宽度

我正在尝试获取我用d3.js创建的一堆text元素的宽度这就是我创建它们的方式:varnodesText=svg.selectAll("text").data(dataset).enter().append("text").text(function(d){returnd.name;}).attr("x",function(d,i){returni*(w/dataset.length);}).attr("y",function(d){return45;});然后我使用宽度创建与text的框大小相同的rectanglesvarnodes=svg.selectAll("rect").dat

javascript - 脚本 SVG

我正在考虑开发一个类似于stackoverflow的网站,但答案也可能包含图纸(在本例中为原理图)。我想在答案表中有一个区域,他们可以在不需要特殊插件等的情况下制作这个原理图。我们是否到了SVG已经或应该很快(1-2年)达到临界质量的地步,以便设计一个以脚本运行SVG作为主要功能的网站是合理的(即,需要Firefox或其他SVG/AJAX兼容浏览器)?学习跨平台SVG脚本(可能是javascript)有哪些好的资源?-亚当·戴维斯 最佳答案 Raphael看起来像是对跨浏览器矢量图形问题的有趣看法。

javascript - 不移动位置的 SVG 比例

我想做的很简单:当使用vanillajs悬停同级元素时,将一些SVG点从scale(0)缩放到scale(1).它们是thedemo中的红色这是基本的SVG设置.st3{fill:red;}*{-webkit-transition:.3s;transition:.3s;}问题是SVG缩放基于原点位置,而不是当前位置,因此当应用变换时,除了缩放元素外,它还会移动元素。我试图通过按BBox()偏移进行翻译、缩放,然后再翻译回来来解决这种情况,但这似乎只是有帮助,并没有完全解决问题。varshield=document.getElementById("Layer_4"),dots=docum

javascript - 如何向 Raphael.js 对象添加阴影?

我想了解如何向Raphael.js对象/路径添加模糊边缘投影。据我所知,图书馆不可能按原样使用,但有解决办法吗? 最佳答案 您可以使用Element.glow([glow])来获得阴影效果。http://raphaeljs.com/reference.html#Element.glow 关于javascript-如何向Raphael.js对象添加阴影?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/